<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="form-movie">
        <form action="" id="formList" >
           <ul>
            <li><span>电影标题：</span>  <input type="text" name="title" id=""></li>
            <li><span>主演：</span> 
                <div>
                    <input type="text" name="actors" id="">
                </div>
            </li>
            <li><span>主演图片：</span>  <input type="file" name="imgSrc" id=""></li>
            <li><span>导演：</span>  <input type="text" name="director" id=""></li>
            <li> <span>评分：</span>  <input type="text" name="score" id=""></li>
            <li><span>放映时间：</span>  <input type="date" name="release" id=""></li>
            <li> <span>影片类型：</span> 
          
                <div>
                     <label for="m01"> <input type="checkbox" name="movieType" id="m01" value="1"> 喜剧</label>
                     <label for="m02"> <input type="checkbox" name="movieType" id="m02" value="2"> 动作</label>
                     <label for="m03"> <input type="checkbox" name="movieType" id="m03" value="3"> 爱情</label>
                     
             </div>
            </li>
             <li><span>语言：</span>  <select name="language" id="">
                <option value="01">中文</option>
                <option value="02">英文</option>
             </select></li>
             <li><span>所属区域：</span>  <select name="region" id="">
                <option value="01">大陆</option>
                <option value="02">国外</option>
             </select></li>
             <li><span>描述：</span>  <textarea name="desc" id=""></textarea></li>
             <li><span>时长：</span> <input type="text" name="duration" id="">
             </li>
             <li><span>电影海报：</span>  <input type="file" name="posterSrc" id=""></li>
              <li><span>宣传片：</span>   <input type="file" name="trailerLink" id=""></li> 
             <!-- <li><span>评论</span>  <textarea name="comments" id=""></textarea></li> -->
            </ul>
           
                <button type="submit" class="btn-send">添加影片</button>
        </form>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>

            var form = document.querySelector('#formList');
            var btnSend = form.querySelector('.btn-send');
            btnSend.addEventListener('click',(ev)=>{
                // 阻止form表单的默认行为
                ev.preventDefault();
                 // 获取form表单数据的数据
                //  encodeURIComponent    
                var datas = new FormData(form);
                
                axios({
                    url:'http://localhost:3000/movie/add',
                    method:'post',
                    data:datas,
                    headers:{
                        'Content-Type':'multipart/form-data'
                    }
                }).then((res)=>{
                    console.log(res.data);
                    
                })

            })
        </script>
    </div>
</body>
</html>